<template>
  <div class="personnel-control-container">
    <!-- 左侧内容 -->
    <div class="left-content">
      <!-- 重点人员态势总览 -->
      <div class="stat-card">
        <div class="card-title">重点人员态势总览</div>
        <div class="overview-stats">
          <div class="total-count">
            <div class="count-value">84</div>
            <div class="count-label">在管总数</div>
          </div>
          <div class="category-distribution">
            <div class="category-item">
              <div class="category-label">前科人员</div>
              <div class="category-value">32%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 32%; background: #FF4D4F;"></div>
              </div>
            </div>
            <div class="category-item">
              <div class="category-label">吸毒史</div>
              <div class="category-value">28%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 28%; background: #FAAD14;"></div>
              </div>
            </div>
            <div class="category-item">
              <div class="category-label">精神障碍</div>
              <div class="category-value">22%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 22%; background: #1890FF;"></div>
              </div>
            </div>
            <div class="category-item">
              <div class="category-label">其他</div>
              <div class="category-value">18%</div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: 18%; background: #52C41A;"></div>
              </div>
            </div>
          </div>
          <div class="warning-status">
            <div class="warning-title">近30天动态预警</div>
            <div class="warning-count">12次</div>
            <div class="warning-lights">
              <div class="light red"></div>
              <div class="light yellow"></div>
              <div class="light green"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 近期走访记录 -->
      <div class="stat-card">
        <div class="card-title">近期走访记录</div>
        <div class="visit-records" ref="visitRecords" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
          <div class="visit-item" v-for="(item, index) in visitRecords" :key="index">
            <div class="visit-header">
              <div class="visit-info">
                <span class="person-name">{{ item.name }}</span>
                <span class="visit-date">{{ item.date }}</span>
              </div>
              <div class="visit-status">
                <span class="status-dot"></span>
                <span class="status-text">已处理</span>
              </div>
            </div>
            <div class="visit-content">
              <div class="visit-tag">{{ item.tag }}</div>
              <div class="visit-desc">走访记录详情描述，包含具体处理情况...</div>
            </div>
            <div class="visit-footer">
              <div class="visit-actions">
                <button class="action-btn view">查看详情</button>
                <!-- <button class="action-btn edit">编辑记录</button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div class="center-content">
      <!-- 地图区域 -->
      <div class="stat-card">
        <div class="card-title">重点人员分布</div>
        <div class="map-wrapper">
          <div id="personnelMap"></div>
        </div>
      </div>

      <!-- 异常行为分析 -->
      <div class="stat-card">
        <div class="card-title">异常行为分析</div>
        <div class="abnormal-behavior">
          <div id="abnormalBehaviorChart" ref="abnormalBehaviorChart" style="height: 200px;"></div>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <!-- 管控措施执行看板 -->
      <div class="stat-card">
        <div class="card-title">管控措施执行看板</div>
        <div class="control-measures">
          <div class="measure-item">
            <div class="measure-header">
              <div class="measure-icon">
                <i class="icon-fence"></i>
              </div>
              <div class="measure-info">
                <div class="measure-label">电子围栏覆盖率</div>
                <div class="measure-value">91%</div>
              </div>
            </div>
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 91%; background: linear-gradient(90deg, #00c6ff, #0072ff);"></div>
              </div>
              <!-- <div class="progress-text">较上月提升 3%</div> -->
            </div>
          </div>
          <div class="measure-item">
            <div class="measure-header">
              <div class="measure-icon">
                <i class="icon-biometric"></i>
              </div>
              <div class="measure-info">
                <div class="measure-label">生物特征采集率</div>
                <div class="measure-value">87%</div>
              </div>
            </div>
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 87%; background: linear-gradient(90deg, #52c41a, #73d13d);"></div>
              </div>
              <!-- <div class="progress-text">较上月提升 2%</div> -->
            </div>
          </div>
          <div class="measure-item">
            <div class="measure-header">
              <div class="measure-icon">
                <i class="icon-social"></i>
              </div>
              <div class="measure-info">
                <div class="measure-label">社工介入完成度</div>
                <div class="measure-value">76%</div>
              </div>
            </div>
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" style="width: 76%; background: linear-gradient(90deg, #faad14, #ffc53d);"></div>
              </div>
              <!-- <div class="progress-text">较上月提升 5%</div> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 生物特征核验 -->
      <div class="stat-card">
        <div class="card-title">生物特征核验</div>
        <div class="biometric-verification">
          <div class="verification-item">
            <div class="verification-label">人脸比对相似度</div>
            <div class="verification-value">92%</div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 92%;"></div>
            </div>
          </div>
          <div class="verification-item">
            <div class="verification-label">步态识别匹配度</div>
            <div class="verification-value">88%</div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 88%;"></div>
            </div>
          </div>
          <button class="voice-verify-btn">声纹验证</button>
        </div>
      </div>

      <!-- 管控效能统计 -->
      <div class="control-efficiency">
        <div class="card-title">管控效能统计</div>
        <div id="controlEfficiencyChart" ref="controlEfficiencyChart" style="height: 200px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
/* global TMap */
import * as echarts from 'echarts'

export default {
  name: 'PersonnelControl',
  data() {
    return {
      map: null,
      fence: null,
      personnelData: [
        {
          position: { lat: 39.744568, lng: 98.493843 },
          title: '重点人员A',
          content: '前科人员，需重点关注',
          type: 'warning'
        },
        {
          position: { lat: 39.744668, lng: 98.493943 },
          title: '重点人员B',
          content: '吸毒史，定期尿检',
          type: 'person'
        },
        {
          position: { lat: 39.744768, lng: 98.494043 },
          title: '重点人员C',
          content: '精神障碍，定期随访',
          type: 'person'
        }
      ],
      visitRecords: [
        { name: '张*强', date: '06-12', tag: '情绪波动' },
        { name: '李*', date: '06-10', tag: '未在登记住址' },
        { name: '王*明', date: '06-08', tag: '行为异常' },
        { name: '赵*', date: '06-05', tag: '未按时报到' },
        { name: '刘*华', date: '06-03', tag: '活动轨迹异常' }
      ],
      scrollInterval: null,
      scrollSpeed: 50,
      scrollPosition: 0,
      isScrolling: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
      this.initAbnormalBehaviorChart()
      this.initControlEfficiencyChart()
      this.startAutoScroll()
    })
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new TMap.Map(document.getElementById('personnelMap'), {
        center: new TMap.LatLng(39.744568, 98.493843),
        zoom: 18,
        viewMode: '2D',
        baseMap: {
          type: 'vector',
          features: ['base', 'building2d', 'building3d', 'point', 'label'],
          theme: 'style2'
        },
        mapStyleId: '4c5c88f1c7d2347e99e5e5e7d22afd7f'
      })

      // 创建电子围栏
      this.fence = new TMap.MultiPolygon({
        map: this.map,
        geometries: [{
          id: 'fence1',
          styleId: 'fenceStyle',
          paths: [
            new TMap.LatLng(39.744368, 98.493643),
            new TMap.LatLng(39.744768, 98.493643),
            new TMap.LatLng(39.744768, 98.494043),
            new TMap.LatLng(39.744368, 98.494043)
          ]
        }],
        styles: {
          fenceStyle: new TMap.PolygonStyle({
            color: 'rgba(0, 198, 255, 0.2)',
            borderColor: '#00c6ff',
            borderWidth: 2,
            showBorder: true
          })
        }
      })

      // 定义标记点样式
      const markerStyles = {
        'warning': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#FF4D4F'
        }),
        'person': new TMap.MarkerStyle({
          width: 32,
          height: 32,
          anchor: { x: 16, y: 32 },
          src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/custom-marker.png',
          faceTo: 'map',
          rotate: 0,
          color: '#1890FF'
        })
      }

      // 创建标记点图层
      const markers = this.personnelData.map(person => {
        return {
          id: person.title,
          styleId: person.type,
          position: new TMap.LatLng(person.position.lat, person.position.lng),
          properties: {
            title: person.title,
            content: person.content
          }
        }
      })

      // 创建标记点图层
      const markerLayer = new TMap.MultiMarker({
        map: this.map,
        styles: markerStyles,
        geometries: markers
      })

      // 创建文本标记样式
      const labelStyle = {
        color: '#00c6ff',
        fontSize: '13px',
        fontWeight: 'bold',
        backgroundColor: 'rgba(0,24,48,0.85)',
        padding: '5px 10px',
        borderRadius: '3px',
        border: '1px solid rgba(0,198,255,0.3)',
        offset: { y: -42 },
        boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
      }

      // 创建文本标记
      const labels = this.personnelData.map(person => {
        return {
          position: new TMap.LatLng(person.position.lat, person.position.lng),
          content: person.title,
          style: labelStyle
        }
      })

      // 添加文本图层
      new TMap.MultiLabel({
        map: this.map,
        styles: { label: { } },
        geometries: labels
      })

      // 创建信息窗口
      const infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: new TMap.LatLng(39.744568, 98.493843),
        content: '',
        offset: { x: 0, y: -35 }
      })

      // 添加点击事件
      markerLayer.on('click', (evt) => {
        const marker = evt.geometry
        this.showInfoWindow(marker, infoWindow)
      })

      // 初始显示第一个点位的信息
      this.showInfoWindow(markers[0], infoWindow)
    },
    showInfoWindow(marker, infoWindow) {
      infoWindow.setPosition(marker.position)
      infoWindow.setContent(`
        <div style="padding: 12px; background: rgba(0,24,48,0.95); border-radius: 4px; border: 1px solid rgba(0,198,255,0.3); box-shadow: 0 2px 12px rgba(0,0,0,0.3);">
          <h4 style="margin: 0 0 8px; color: #00c6ff; font-size: 16px; border-bottom: 1px solid rgba(0,198,255,0.2); padding-bottom: 8px;">${marker.properties.title}</h4>
          <p style="margin: 0; color: #fff; font-size: 14px; line-height: 1.5;">${marker.properties.content}</p>
        </div>
      `)
      infoWindow.open()
    },
    initAbnormalBehaviorChart() {
      const chartDom = this.$refs.abnormalBehaviorChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}次'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['夜间活跃', '偏离常驻点', '关联人员聚集', '异常消费', '频繁更换住址', '未按时报到'],
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)',
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '次数',
          nameTextStyle: {
            color: 'rgba(255, 255, 255, 0.7)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.7)'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.1)'
            }
          }
        },
        series: [{
          type: 'bar',
          data: [42, 28, 19, 15, 12, 8],
          barWidth: '40%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 198, 255, 0.8)' },
              { offset: 1, color: 'rgba(0, 198, 255, 0.3)' }
            ]),
            borderRadius: [4, 4, 0, 0]
          },
          label: {
            show: true,
            position: 'top',
            color: '#00c6ff',
            fontSize: 14,
            formatter: '{c}次'
          }
        }]
      }
      myChart.setOption(option)
      
      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    initControlEfficiencyChart() {
      const chartDom = this.$refs.controlEfficiencyChart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}%'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 0,
          bottom: 10,
          textStyle: {
            color: 'rgba(255, 255, 255, 0.7)'
          }
        },
        series: [{
          type: 'pie',
          radius: ['20%', '60%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#001324',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold',
              color: '#fff'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 45, name: '民警处置', itemStyle: { color: '#00c6ff' } },
            { value: 33, name: '网格员处置', itemStyle: { color: '#52c41a' } },
            { value: 22, name: '智能系统拦截', itemStyle: { color: '#faad14' } }
          ]
        }]
      }
      myChart.setOption(option)
      
      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    startAutoScroll() {
      const container = this.$refs.visitRecords
      const items = container.querySelectorAll('.visit-item')
      let currentIndex = 0
      
      this.scrollInterval = setInterval(() => {
        if (this.isScrolling) {
          items.forEach((item, index) => {
            if (index === currentIndex) {
              item.style.opacity = '1'
              item.style.transform = 'translateY(0)'
            } else {
              item.style.opacity = '0'
              item.style.transform = 'translateY(20px)'
            }
          })
          
          currentIndex = (currentIndex + 1) % items.length
        }
      }, 3000)
    },
    pauseScroll() {
      this.isScrolling = false
    },
    resumeScroll() {
      this.isScrolling = true
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval)
    }
  }
}
</script>

<style scoped>
.personnel-control-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 40px);
  width: 100%;
  padding: 20px;
  color: #fff;
  background: #001324;
  box-sizing: border-box;
  overflow: hidden;
}

.left-content, .right-content {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding-bottom: 20px;
  height: calc(100vh - 60px);
}

.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 20px;
  height: calc(100vh);
}

.map-wrapper {
  width: 100%;
  height: 600px;
  border-radius: 4px;
  overflow: hidden;
  background: #001324;
  margin-top: 10px;
  margin-bottom: 10px;
}

#personnelMap {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #001324;
}

.stat-card {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: auto;
  /* border: 1px solid #00c6ff; */
}

.card-title {
  color: #fff;
  font-size: 16px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 10px;
  flex-shrink: 0;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #00c6ff;
}

.overview-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.total-count {
  text-align: center;
  padding: 20px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 4px;
}

.count-value {
  font-size: 36px;
  font-weight: bold;
  color: #00c6ff;
}

.count-label {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.category-distribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-label {
  width: 80px;
  color: rgba(255, 255, 255, 0.7);
}

.category-value {
  width: 40px;
  color: #00c6ff;
  font-weight: bold;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.warning-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 4px;
}

.warning-title {
  color: rgba(255, 255, 255, 0.7);
}

.warning-count {
  color: #00c6ff;
  font-weight: bold;
}

.warning-lights {
  display: flex;
  gap: 8px;
}

.light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.light.red {
  background: #FF4D4F;
  box-shadow: 0 0 8px #FF4D4F;
}

.light.yellow {
  background: #FAAD14;
  box-shadow: 0 0 8px #FAAD14;
}

.light.green {
  background: #52C41A;
  box-shadow: 0 0 8px #52C41A;
}

.visit-records {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100% - 40px);
  overflow: hidden;
  padding: 10px;
  position: relative;
}

.visit-records::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, rgba(0, 24, 48, 0.5));
  pointer-events: none;
}

.visit-records::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(rgba(0, 24, 48, 0.5), transparent);
  pointer-events: none;
}

.visit-item {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 198, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.visit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.visit-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.person-name {
  color: #00c6ff;
  font-weight: bold;
  font-size: 16px;
}

.visit-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  background: rgba(0, 198, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.visit-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52C41A;
  box-shadow: 0 0 8px #52C41A;
}

.status-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.visit-content {
  margin: 12px 0;
}

.visit-tag {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(255, 77, 79, 0.2);
  color: #FF4D4F;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.visit-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

.visit-footer {
  border-top: 1px solid rgba(0, 198, 255, 0.1);
  padding-top: 12px;
  margin-top: 12px;
}

.visit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.action-btn.view {
  background: rgba(0, 198, 255, 0.2);
  color: #00c6ff;
}

.action-btn.edit {
  background: rgba(82, 196, 26, 0.2);
  color: #52C41A;
}

.action-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.control-measures {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* padding: 10px; */
  height: 300px;
}

.measure-item {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  height: 90px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s ease;
  
}

.measure-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.2);
  border-color: rgba(0, 198, 255, 0.3);
}

.measure-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-left: 16px;
  margin-top: 16px;
}

.measure-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 198, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #00c6ff;
}

.measure-info {
  flex: 1;
}

.measure-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-bottom: 4px;
}

.measure-value {
  color: #00c6ff;
  font-size: 24px;
  font-weight: bold;
}

.progress-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-bar {
  height: 8px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  padding-bottom: -50px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  position: relative;
  overflow: hidden;
  padding-bottom: 8px;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.1) 100%);
  animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-align: right;
}

/* 图标样式 */
.icon-fence::before {
  content: '🔒';
}

.icon-biometric::before {
  content: '👤';
}

.icon-social::before {
  content: '🤝';
}

.biometric-verification {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.verification-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verification-label {
  color: rgba(255, 255, 255, 0.7);
}

.verification-value {
  color: #00c6ff;
  font-weight: bold;
}

.voice-verify-btn {
  margin-top: 16px;
  padding: 8px 16px;
  background: rgba(0, 198, 255, 0.2);
  border: 1px solid #00c6ff;
  border-radius: 4px;
  color: #00c6ff;
  cursor: pointer;
  transition: all 0.3s;
}

.voice-verify-btn:hover {
  background: rgba(0, 198, 255, 0.3);
}

/* 移除滚动条样式 */
.left-content::-webkit-scrollbar {
  display: none;
}

.left-content::-webkit-scrollbar-thumb {
  display: none;
}

.left-content::-webkit-scrollbar-track {
  display: none;
}

.abnormal-behavior {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#abnormalBehaviorChart {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.control-efficiency {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  padding: 20px;
  height: 200px;
}

#controlEfficiencyChart {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 150px;
}
</style> 